new Vue({
  el: '#root',

  data: {
    tab: 'signin',
    isShowPay: false,
    payType: 'union',
    isReadedAgreement: false,
    bornYears: [],
    bornMonths: [],
    bornDays: [],
    fee: 'feeA',
    isBannerFill: true,
    alert: {
      isEmailAlert: false,
      isPwAlert: false,
      isRePwAlert: false,
      isNameAlert: false,
    },
    email: '',
    pw: '',
    rePw: '',
    name: '',
  },

  created () {
    this.bornYears = this.getBornYears()
    this.bornMonths = this.getBornMonths()
    this.bornDays = this.getBornDays()
    const type = querystring(location.search.replace('?', '')).type
    if (['signup', 'signin', 'forget'].indexOf(type) > -1) {
      this.tab = type
    } else {
      this.tab = 'signin'
    }
  },

  methods: {
    onTapBuy () {
      this.isShowPay = true
    },
    getBornYears () {
      const currentYear = new Date().getFullYear()
      const years = []
      for (let i = currentYear; i >= 1900; i --) {
        years.push(i)
      }
      return years
    },
    getBornMonths() {
      const months = []
      for (let i = 1; i <= 12; i ++) {
        months.push(i)
      }
      return months
    },
    getBornDays() {
      const days = []
      for (let i = 1; i <= 31; i ++) {
        days.push(i)
      }
      return days
    },
    onBlurEmail (e) {
      this.alert.isEmailAlert = !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)
    },
    onBlurPw (e) {
      this.alert.isPwAlert = this.pw.length < 6
    },
    onBlurRePw () {
      this.alert.isRePwAlert = this.rePw !== this.pw
    },
    onBlurName () {
      this.alert.isNameAlert = !this.name
    }
  },

  mounted () {
    document.querySelector('#root').style.background = '#fff'
  },
})